<template>
  <div class="user">
    
    <div class="content">
      <!-- 余额模块 -->
      <van-grid :column-num="4" :border="false" class="topbox" >
        <van-grid-item text="余额" >
          <template #icon>
            <div class="text">{{ userinfo?.nowMoney }}</div>
          </template>
        </van-grid-item>
        <van-grid-item text="优惠券" >
          <template #icon>
            <div class="text">{{ userinfo?.couponCount }}</div>
          </template>
        </van-grid-item>
        <van-grid-item text="购买数" >
          <template #icon>
            <div class="text">{{ userinfo?.payCount }}</div>
          </template>
        </van-grid-item>
        <van-grid-item text="积分" >
          <template #icon>
            <div class="text">{{ userinfo?.integral }}</div>
          </template>
        </van-grid-item>
      </van-grid>

      <!-- 订单模块 -->
      <van-grid class="order" :column-num="5" :border="false">
        <van-grid-item icon="shop-o" @click="$router.push('/order?type=0')" text="未支付" :badge="orderStatusNum.unpaidCount || ''" />
        <van-grid-item icon="logistics" @click="$router.push('/order?type=1')" text="待发货" :badge="orderStatusNum.unshippedCount || ''" />
        <van-grid-item icon="shop-collect-o" @click="$router.push('/order?type=2')" text="待收货" :badge="orderStatusNum.receivedCount || ''"/>
        <van-grid-item icon="comment-o" @click="$router.push('/order?type=3')" text="待评价" :badge="orderStatusNum.evaluatedCount || ''"/>
        <van-grid-item icon="cart-o" @click="$router.push('/order?type=4')" text="已完成" :badge="orderStatusNum.completeCount || ''"/>
      </van-grid>

      <!-- 其它模块 -->
      <van-cell-group class="xxx">
        <van-cell title="地址管理" is-link to="/address">
          <template #icon>
            <van-icon name="location" class="icon" color="#75D0A5"/>
          </template>
        </van-cell>
        <van-cell title="我的钱包" is-link to="/recharge" >
          <template #icon>
            <van-icon name="paid" class="icon" color="#E9B5BC"/>
          </template>
        </van-cell>
        <van-cell title="我的收藏" is-link to="/collect?type=collect">
          <template #icon>
            <van-icon name="goods-collect" class="icon" color="#5DB9EA"/>
          </template>
        </van-cell>
        <van-cell title="我的足迹" is-link to="/collect?type=foot">
          <template #icon>
            <van-icon name="clock" class="icon" color="#F98799"/>
          </template>
        </van-cell>
        <van-cell title="修改密码" is-link >
          <template #icon>
            <van-icon name="setting" class="icon" color="#CC7C77"/>
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 退出登录 -->
      <van-button block type="danger" @click="logout">退出登录</van-button>

    </div>

    <van-icon name="setting-o" class="setting" />
  </div>
</template>

<script>
import {
  userinfo,
  logout,
} from '@/api/user'

export default {
  data() {
    return {
      userinfo: null, // 用户信息
    }
  },
  created() {
    this.getUserinfo()
  },
  methods: {
    // 获取用户信息
    async getUserinfo() {
      const { data } = await userinfo()
      this.userinfo = data || null
    },

    // 退出登录
    logout() {
      logout()
      localStorage.clear()
      this.$toast('退出登录成功~')
      this.$router.push('/login')
    }
  },
  computed: {
    // 计算用户订单数
    orderStatusNum() {
      return this.userinfo?.orderStatusNum || {}
    }
  },
}
</script>
<style lang="scss" scoped>
.user {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 100vh;
  &::before, &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30vh;
    background-color: #F91A46;
    border-radius: 0 0 20px 20px;
    z-index: -1;
  }
  &::after {
    top: -140px;
    left: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-color: #ffffff28;
    box-shadow: 120px 81px 0px -90px rgb(255 255 255 / 16%),
    338px 187px 0px -76px rgb(255 255 255 / 16%),
    320px 250px 0px -76px rgb(255 255 255 / 16%),
    333px 225px 0px -76px rgb(255 255 255 / 16%)
    ;
  }
  .content {
    width: calc(100% - 40px);
    height: 60vh;
    .topbox {
      border-radius: 5px;
      overflow: hidden;
      .van-grid-item {
        .text {
          font-size: 18px;
          color: #EB7B0D;
          margin-bottom: 2px;
        }
      }
    }

    .order {
      margin: 12px 0;
      border-radius: 5px;
      overflow: hidden;
    }

    .xxx {
      margin-bottom: 15px;
      text-align: left;
      .icon {
        font-size: 16px;
        margin: 4px 5px;
      }
    }
  }
  .setting {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #ffffffd7;
    font-size: 30px;
    
  }
}
</style>
<style scoped>
.topbox >>> .van-grid-item__content--center {
  background-color: #301317;
}
.topbox >>> .van-grid-item__text {
  color: #fff;
}
.order >>> .van-grid-item__text {
  margin-top: 2px;
}
.order >>> .van-grid-item__content {
  padding: 8px;
}
</style>